<template>
  <div class="login">
    <!-- 注册表单 -->
    <div class="formContainer">
      <div class="loginImg">
        <img src="@/assets/loginImg.png" alt="" />
      </div>
      <div class="formBlock">
        <div class="tip">{{ flag ? "用户登录" : "用户注册" }}</div>
        <el-form
          v-if="!flag"
          ref="registeredForm"
          :model="registeredForm"
          :rules="registeredRules"
        >
          <el-form-item prop="nickName">
            <el-input
              v-model="registeredForm.nickName"
              placeholder="请输入昵称"
            ></el-input>
          </el-form-item>
          <el-form-item prop="userName">
            <el-input
              v-model="registeredForm.userName"
              placeholder="请输入账号，注册后不可修改"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="registeredForm.password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onRegistered">注册</el-button>
          </el-form-item>
        </el-form>
        <!-- 登录表单 -->
        <el-form v-if="flag" ref="loginForm" :model="loginForm" :rules="loginRules">
          <el-form-item prop="userName">
            <el-input
              v-model="loginForm.userName"
              placeholder="请输入账号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
            <el-button  @click="onLogin">登录</el-button>
          </el-form-item>
        </el-form>
        <div class="changeForm" @click="changeStatus">{{flag ? "快速注册" : "返回账号登录"}}</div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入封装的接口功能组件
import { login, registered, getUserInfo } from "@/services/user";

export default {
  name: "LoginIndex",
  data() {
    return {
      flag: true,
      // 存储表单数据的对象
      loginForm: {
        userName: "170210315",
        password: "123456",
      },

      // 用于设置表单校验规则
      loginRules: {
        userName: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      registeredForm: {
        nickName: "不知",
        userName: "170210315",
        password: "123456",
      },
      registeredRules: {
        nickName: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          {
            min: 2,
            max: 6,
            message: "昵称长度为2到6位字符",
            trigger: "blur",
          },
        ],
        userName: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            pattern: /^[\d\w]{6,10}$/,
            message: "账号长度为6-10位字母或数字",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "密码长度为 6 到 18 位",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    changeStatus() {
      this.flag = !this.flag;
    },
    // 登录功能
    async onLogin() {
      try {
        await this.$refs.loginForm.validate();
        login(this.loginForm)
          .then((res) => {
            const data = res.data;
            if (data.data) {
              this.$store.commit("setUserToken", data.data);
              getUserInfo().then((res) => {
                const temp = res.data;
                if (temp.data) {
                  this.$store.commit("setUser", temp.data);
                  this.$message.success("登录成功！");
                  this.$router.push(this.$route.query.redirect || "/");
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          })
          .catch((e) => e);
      } catch (err) {
        // 设置校验失败后的功能（提示）
        console.log("没有通过校验");
      }
    },
    async onRegistered() {
      try {
        console.log(this.registeredForm);
        await this.$refs.registeredForm.validate();
        registered(this.registeredForm)
          .then((res) => {
            if (res.data.data) {
              this.$message.success("注册成功！");
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .catch((e) => e);
      } catch (err) {
        // 设置校验失败后的功能（提示）
        console.log("没有通过校验");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  height: 100vh;
  background-image: url("~@/assets/loginBackGround.png");

  .formContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
    height: 600px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    display: flex;
    .loginImg {
      width: 50%;
      background-color: rgb(255, 239, 157);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .formBlock {
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #ffe;
      .tip {
        margin: 150px auto 50px;
      }
      .changeForm {
        margin-top: 25px;
        cursor: pointer;
      }
      .el-form {
        background-color: #ffe;
        width: 60%;
        text-align: center;
        .el-button {
          width: 80%;
          border-radius: 20px;
          background-color: rgb(105, 105, 105);
          border-color: rgb(105, 105, 105);
          color: white;
        }
      }
    }
  }
}
.el-input__inner {
  border-color: #ffef9d !important;
}
</style>
